<?php
//debug($modules);

?>
<div class="isHidden" id="dmdId"></div>
<!--*****************  LEFT  *****************-->
      <div class="columnLeft">
          <div class="content">
              <!--*****************  MENU  *****************-->
              <div class="contentMenu">

                  <div class="contentMenuItems">
                      <ul>
                          <li class="contentMenuTitle"><?php __('Actions'); ?></li>
                          <li class="contentMenuSeparator"></li>


                            <li><?php echo  $this->Html->link(__('Modules', true), array('controller' => 'modules', 'action' => 'listModules')); ?> </li>
                          <li class="contentMenuSeparator"></li>
                          <li class="contentMenuBottom"></li>
                      </ul>
                  </div>

              </div>
          </div>
      </div>
<!--*****************  RIGHT  *****************-->
      <div class="columnRight">
          <div class="content">
              <div class="contentCenter">
                  <div class="margin">
                      <h2><?php  __('Select Demand form Type :') ?></h2>
                      <div class="margin" >
                          <table>
                              <tr>
                                  <td>
                                     <?php
                                     echo $this->Form->create();
                                     echo $this->Form->input('type_id',array('label'=>false,'empty'=>'select','options'=>$dmd));
                                     echo $this->Form->end();
                                     ?>
                                  </td>
                                  <td>
                                      <div id="saveModules" class="showNextBtn isHidden"><?php echo $this->Html->link( __('Save Changes',true),array('action'=>'saveModules') ); ?></div>
                                  </td>
                                  <td></td>
                              </tr>
                          </table>
                          
                      </div>
                  </div>
                  <div class="margin">
                      <div class="modsList">
                          <h2><?php  __('Modules') ?></h2>
                          <ul id="mods" class="dropfalse">
                              <?php foreach($mods as $md => $mds):  ?>
                                  <li class="ui-state-default"><?php echo $md  ?></li>
                              <?php endforeach;  ?>
                          </ul>
                      </div>
                      <?php foreach($dmd as $did => $d):  ?>
                          <div id="dmd<?php echo $did  ?>" class="dmd modsList isHidden">
                              <h2><?php __($d)  ?></h2>
                              <ol>
                                  <?php if(count($modules[$d])>0):  ?>
                                      <?php foreach ($modules[$d] as $m):  ?>
                                      <li class="ui-state-default"><?php echo $m  ?></li>
                                      <?php endforeach;  ?>
                                  <?php else:  ?>
                                      <li class="placeholder"><?php __('Drop here')  ?></li>
                                  <?php endif;  ?>
                              </ol>
                          </div>
                      <?php endforeach;  ?>
                  </div>
                
              </div>
          </div>
      </div>

<div id="rslt"></div>


	<style type="text/css">
	
        .modsList{
                width: 280px;
                float: left;
                margin-right: 10px;
            }
        .modsList ul{
                list-style-type: none;
                margin: 0 auto;
                padding: 0;
                background: #eee; 
                display: block;
                width: 143px;
                padding: 5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
            }
        .modsList ol{
                list-style-position:  inside;
                margin: 0 auto;
                padding: 0;
                background: #eee;
                display: block;
                width: 143px;
                padding: 5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
            }
        .modsList li{
                margin: 5px;
                padding: 5px;
                font-size: 1em;
                width: 120px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
            }
            .draggingMe{
                font-size: 1em;
                width: 120px;
                height: 15px;
                padding: 5px;
                line-height: 15px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
            }
 
	</style>








	<script type="text/javascript">
	$(function() {
                $( "#mods li" ).draggable({
			appendTo: "body",
			helper: function(event){
                            return $('<div class="draggingMe ui-widget-header">'+$(this).text()+'</div>');
                        }
		});
                $( "#mods").droppable({
                    accept:"ol li.ui-state-default ",
                    drop: function(event,ui){
                        ol=ui.draggable.parent();
                        ui.draggable.remove();
                        //alert(ol.find('li').length);

                       if(ol.find('li').length==1){
                           //alert(ol.find('li').length);
                           ol.append('<li class="placeholder">drop here</li>');
                           
                       }
                       
                    }
                });

                $( ".dmd ol" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				$( this ).find( ".placeholder" ).remove();
				$( '<li class="ui-state-default"></li>' ).text( ui.draggable.text() ).appendTo( this );
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				// gets added unintentionally by droppable interacting with sortable
				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
				$( this ).removeClass( "ui-state-default" );
			}
		});

		

                $('#ModuleTypeId').live('change',function(){
                    if ($(this).val().length>0){
                        $('.dmd').hide();
                        $('#dmdId').text($(this).val());
                        $('#dmd'+$(this).val()).show();
                        $('#saveModules').show();
                    }else{
                        $('.dmd').hide();
                        $('#dmdId').text(0);
                        $('#saveModules').hide();
                    }
                })

                $('#saveModules a').live('click',function(){
                    $(this).parent().parent().next('td').empty().append('<div class="inlineLoader"></div>');
                    $nb=parseInt($('#dmdId').text());
                    $ol= $('#dmd'+$nb);
                    $data=[];
                    $data.push({name:"data[dmd][nb]",value:$nb});
                    $href=$(this).attr('href');

                    if ($ol.find('li:first').attr('class')!='placeholder'){                        
                        $ol.find('li').each(function(index){                                                     
                            $data.push({name:"data[Module]["+$(this).text()+"]",value:(parseInt(index)+1)});                            
                        });
                        $.post($href,$data,function(data){
                           $('.inlineLoader').remove();
                           $('.headerUserInfoInfos').append('<div class="message">Modules saved</div>');
                           $('.message').delay(2000).fadeOut();
                        });
                    }
                    return false;
                });
	});
	</script>
